<template>
  <div class="block">
    <div class="timeselect">
      <el-date-picker
        v-model="timerange"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <el-tooltip content="点击这里选择导出图片的背景颜色" placement="top-start">
        <el-color-picker v-model="color"> </el-color-picker>
      </el-tooltip>
      <el-button @click="saveToImg" type="primary" size="small"
        >导出img</el-button
      >
      <el-button @click="updateTodoList" size="small">确定</el-button>
    </div>
    <div ref="imgDom" class="timeline">
      <el-timeline>
        <el-timeline-item
          v-for="(activicty, index) in activities"
          :timestamp="
            activicty.todo_date ? activicty.todo_date : activicty.done_date
          "
          :key="index"
          :icon="activicty.done_datetime ? 'el-icon-success' : 'el-icon-error'"
          placement="top"
        >
          <el-card>
            <h4>{{ activicty.content }}</h4>
            <p>{{ activicty.username }} 创建于{{ activicty.todo_datetime }}</p>
            <p v-if="activicty.done_date">
              完成于{{ activicty.done_datetime }}
            </p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import DB from "../utils/db";
import { ipcRenderer } from "electron";
import html2canvas from "html2canvas";

export default {
  name: "MyTimeline",
  data() {
    return {
      activities: [
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 ",
          // size: "large",
          // type: "success",
          icon: "el-icon-success"
        },
        {
          content: "支持自定义颜色",
          timestamp: "2018-04-03",
          icon: "el-icon-error"
        },
        {
          content: "支持自定义尺寸",
          timestamp: "2018-04-03",
          size: "large"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03"
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      timerange: [new Date(),new Date() ],
      color: "rgb(56,83,106)"
    };
  },
  methods: {
    updateTodoList() {
      const list = DB.getTodoByTimeScale(this.timerange[0], this.timerange[1]);
      this.activities = list;
    },
    saveToImg() {
      let opts = {
        backgroundColor: this.color
      };
      console.log(this.timerange)

      html2canvas(this.$refs.imgDom, opts).then(canvas => {
        // 创建隐藏的可下载链接
        var eleLink = document.createElement("a");
        eleLink.href = canvas.toDataURL("image/png");
        if (this.timerange[0] && this.timerange[1])
          eleLink.download = `${this.timerange[0]}到${this.timerange[1]}待办`;
        else eleLink.download = "pic";
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      });
    }
  },
  mounted() {
    ipcRenderer.invoke("getDataPath").then(storePath => {
      DB.initDB(storePath);
      // const list = DB.get("todoList");
      const list = DB.getTodoByTimeScale("1970", "2100");
      this.activities = list;
      console.log(list);
      // console.log(this.activities);
    });
  }
};
</script>

<style lang="scss" scoped>
.block {
  * {
    background-color: unset;
    color: white;
  }
  .timeselect {
    display: flex;
    justify-content: space-around;
    align-content: center;
    text-align: center;
    .el-date-editor {
      max-width: 55vw;
    }
    button {
      height: 32px;
    }
    div {
      input {
        background-color: transparent;
      }
    }
  }
}

.timeline {
  text-align: center;
  max-width: 89vw;
  margin: 0 auto;
  padding: 20px;
}
.el-picker-panel__body-wrapper{

}

// .el-timeline-item{
//     div{
//         top:60px
//     }
// }
</style>
<style>
.el-timeline-item__tail {
  position: absolute;
  left: 4px;
  height: 100%;
  border-left: 2px solid #e4e7ed;
  top: 60px;
}
.el-timeline-item__node--normal {
  left: -1px;
  width: 12px;
  height: 12px;
  top: 60px;
}
.el-range-input {
  background: transparent;
  color: white;
}
.el-timeline-item__timestamp.is-top {
  color: white;
}

.el-card__body:hover {
  background: rgba(255, 255, 255, 0.2);
}
.el-date-range-picker__content {
  width: 40%;
  padding: 0px;
}
.el-date-range-picker.has-sidebar {
  left: 0px;
  width: 531px;
}
.el-picker-panel__sidebar {
  width: 17%;
}

.el-date-range-picker__header div {
  color: black !important;
}
.el-range-separator {
  color: white !important;
}
.available div span {
  color: black !important;
}
/* 时间选择文字颜色 */
.el-range-input {
  color: white !important;
}
/*icon  color  and siez*/
.el-timeline-item__icon {
  font-size: 40px !important;
  background-color: white;
  border-radius: 50%;
}
.el-icon-error {
  color: red;
}
.el-icon-success {
  color: green;
}
.el-color-dropdown__btns span{
  color: black!important;
}

  .el-date-range-picker .el-picker-panel__body{
  min-width: 450px!important;
  }
  .el-date-range-picker__content .el-date-range-picker__header div{
    margin-left: 30px;
  }

  .el-picker-panel [slot=sidebar]+.el-picker-panel__body, .el-picker-panel__sidebar+.el-picker-panel__body{
    margin-left: 90px;
  }
</style>
